<template>
  <div class="container">
    <el-steps
      :space="200"
      :active="active"
      align-center
      finish-status="process"
      style="justify-content: center;">

      <!--wait / process / finish / error / success-->
      <el-step v-for="(item,index) in items" :title="item"></el-step>
    </el-steps>
  </div>
</template>

<script>
  export default {
    components: {},
    props: {
      items:Array,
      active:Number
    },
    data() {
      return {
      }
    },
    watch: {},
    computed: {},
    methods: {},
    created() {
    },
    mounted() {
    }
  };
</script>
<style lang="scss" scoped>
  /*::v-deep .header-cell-class-name {*/
  /*background: #ecf0f3;*/
  /*}*/
  .container {
    background: #EDF1F4;
    opacity: 0.5;
    border-radius: 8px;
  }

  ::v-deep .el-step__title.is-process {
    color: #FFB128;


  }

  ::v-deep .el-step__head.is-process {
    .el-step__line {
      background-color: #FFB128;
      right: 0;
      left: 0;
    }

    .el-step__icon {
      color: white;
      background-color: #FFB128;
      border: 0;
    }
  }

  ::v-deep .el-step__title.is-wait {
    color: #999999;

  }



  ::v-deep .el-step__head.is-wait {
    .el-step__line {
      background-color: #CCCCCC;
      right: 0;
      left: 0;
    }

    .el-step__icon {
      color: white;
      background-color: #CCCCCC;
      border: 0;
    }
  }
  ::v-deep .el-step:last-of-type .el-step__line {
    display: block;
  }

</style>
